<template>
    <div>
        <el-row>
            <el-col :span="24" :inline="true" class="operateView">
                <el-form :inline="true" style="margin:10px 0;margin-left: 20px;">
                    <el-button @click="operateAction('save')" type="primary" plain size="small">保存</el-button>
                    <el-button @click="operateAction('back')" type="info" plain size="small">返回</el-button>
                </el-form>
            </el-col>
        </el-row>
        <div class="app-container">
            <el-row style="margin-top: 10px">
                <el-form ref="rowForm" :model="rowForm" :rules="rules" label-position="top">
                    <el-row style="display: flex;flex-direction: row;flex-wrap: wrap;">
                        <el-col style="margin-left: 20px" :span="item.width ? item.width : 5"
                            v-for="(item, index) in formData.updateFieldList" :key="index" v-if="passRole(item.roles)">
                            <el-form-item style="width: 100%;" :label="item.showName" :prop="item.key"
                                v-if="item.formType == 'Switch'">
                                <el-switch v-model="rowForm[item.key]" :active-value="true" :inactive-value="false"
                                    active-color="#13ce66" inactive-color="#ff4949" />
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key"
                                v-else-if="item.formType == 'Textarea'">
                                <el-input v-model="rowForm[item.key]" placeholder="请输入" type='textarea' :rows="item.rows" />
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key"
                                v-else-if="item.formType == 'RichText'">
                                <Editor v-model="rowForm[item.key]" :minHeight="600" />
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key"
                                v-else-if="item.formType == 'DatePicker'">
                                <el-date-picker @change="pickerChange(item.key, rowForm[item.key])"
                                    v-model="rowForm[item.key]" :type="item.type" placeholder="选择日期">
                                    {{ item.formType }}
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Upload'">
                                <single-upload :form="item"
                                    :fileUrl="rowForm[item.relatedModel] ? rowForm[item.relatedModel]['url'] : rowForm[item.key]"
                                    @handleFileSuccessForOne="handleFileSuccessForOne"></single-upload>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Option'">
                                <el-select v-model="rowForm[item.key]" placeholder="请选择" clearable>
                                    <el-option v-for="option in formData.options[item.key]" :key="option.value"
                                        :label="option.label" :value="option.value"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Record'">
                                <el-select v-model="rowForm[item.key]" placeholder="请选择" clearable>
                                    <el-option v-for="option in formData.options[item.key]" :key="option[item.value]"
                                        :label="option[item.label]" :value="option[item.value]"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Input'">
                                <el-input v-model="rowForm[item.key]" placeholder="请输入" clearable :maxlength="item.maxlength||200" show-word-limit :readonly="item.readonly"/>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Password'">
                                <el-input v-model="rowForm[item.key]" placeholder="请输入" type="password"/>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Money'">
                                <el-input v-model="rowForm[item.key]" placeholder="请输入" type="number"/>
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'JsonStr'">
                                <el-input v-model="rowForm[item.key]" placeholder="请输入" type='textarea' :rows="item.rows" />
                            </el-form-item>
                            <el-form-item :label="item.showName" :prop="item.key" v-else-if="item.formType == 'Color'">
                                <div style="display: flex;flex-direction: row;align-items: center;">
                                    <el-input size="mini" style="width: 140px;"  v-model="rowForm[item.key]"></el-input>
                                    <el-color-picker v-model="rowForm[item.key]"></el-color-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
import singleUpload from '@/components/Upload/singleUpload'
export default {
    components: { singleUpload },
    data() {
        return {
            rowId: '',
            rowData: {},
            rowForm: {},
            rules: {},
            formData: [],
            currentRouteName: ''
        }
    },
    created() {
        if (this.$route.query.currentRouteName) {
            this.currentRouteName = this.$route.query.currentRouteName
        }
        if (this.$route.query.formData) {
            this.formData = JSON.parse((decodeURIComponent(this.$route.query.formData)))
            this.formData.updateFieldList.map((item) => {
                if (item.required) {
                    this.rules[item.key] = [{ required: true, message: '请输入', trigger: 'blur' }]
                }
            })
        }
        if (this.$route.query.rowId) {
            this.rowId = this.$route.query.rowId
            this.getItemById()
        }

    },
    methods: {
        operateAction(scene) {
            switch (scene) {
                case 'save':
                    var url = ''
                    var data = {}
                    // for(var item of this.formData.updateFieldList){
                    //     if(typeof this.rowForm[item.key] != 'undefined'){
                    //         data[item.key] = this.rowForm[item.key]
                    //     }
                    // }
                    for (var item of this.formData.updateFieldList) {
                        if (this.rowData[item.key] != this.rowForm[item.key]) {
                            data[item.key] = this.rowForm[item.key]
                        }
                    }
                    data.formKey = this.formData.formKey
                    if (this.rowId) {
                        data.obj_id = this.rowId
                        url = this.formData.updateUrl
                    } else {
                        url = this.formData.createUrl
                    }
                    this.$refs['rowForm'].validate((valid) => {
                        if (valid) {
                            this.request_post(url, data).then((res) => {
                                if (res.data.code == 10000) {
                                    this.$message({
                                        message: res.data.data,
                                        type: 'success'
                                    })
                                    this.$router.push({ name: this.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams} })
                                }
                            })
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    break;
                case 'back':
                    this.$router.push({ name: this.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams} })
                    break;
                default:
                    break;
            }
        },
        handleFileSuccessForOne(form, val){
            console.log(111, form, val)
            // this.rowForm[form.key] = val
            this.$set(this.rowForm, form.key, val)
        },
        // 获取item详情
        getItemById() {
            this.request_post(this.formData.getItemUrl, { obj_id: this.rowId }).then(res => {
                if (res.data.code == 10000) {
                    this.rowForm = res.data.data
                    this.rowData = JSON.parse(JSON.stringify(this.rowForm))
                }
            });
        },
        pickerChange(key, value) {
            this.rowForm[key] = value
        },
    },
}
</script>


<style lang="scss" scoped>
.operateView {
    width: 100%;
    background-color: #FFF;
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>